
class ChinaMap {
    constructor() {
        console.log('实例化了');
        // 初始化
        this.init();
    }
    init() {
        // 三个对象的实例过程放在这里
        this.scene = new THREE.Scene();
        this.setCamera();  
        this.setRenderer();
        this.creategeometry();//构建一个几何图形

        this.scene.add(this.cube);//把几何图形放进scene中
        // this.renderer.render(this.scene, this.camera);

        this.animate();

        
    }

    //建立透视相机
    setCamera() {
        this.camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
          )
        this.camera.position.z = 5;//因为默认情况下camera和scene在同一位置，调整相机位置后才可以看到scene；
                                   //所以这里调整camera在z轴上的坐标；
                                   //其使用的右手坐标系，既x轴指向屏幕右边，y轴指向屏幕上边，z轴指向用户
        // this.camera.position.x = 2;
        // this.camera.position.y = 1;
    }

    //设置渲染器
    setRenderer() {
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(window.innerWidth, window.innerHeight);//设置画布大小
        document.body.appendChild(this.renderer.domElement);
    }

    //设置环境光
    // setLight() {
    //     this.ambientLight = new THREE.AmbientLight(0xffffff); // 环境光
    //     this.scene.add(ambientLight);
    // }

    //用渲染器渲染场景和相机
    render() {
        this.renderer.render(this.scene, this.camera)
    }

    //构建一个带材质的几何图形(Mesh)
    creategeometry(){
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ 
            color: 0x00ff00 });
        this.cube = new THREE.Mesh(geometry, material);
        
    }

    //改变geometry的方位，不断重新渲染
    animate() {
        requestAnimationFrame(this.animate.bind(this))
        this.cube.rotation.x += 0.01
        this.cube.rotation.y += 0.01
        this.render()
      }
      
}